import { defineComponent, ref, computed, useSlots, onMounted, watch, nextTick, openBlock, createElementBlock, Fragment, createBlock, Teleport, createVNode, Transition, withCtx, createCommentVNode, normalizeClass, normalizeStyle, createElementVNode, renderSlot, toDisplayString, unref } from "vue";
import "../icons/index.mjs";
import FullscreenIcon from "../icons/fullscreen-icon.vue.mjs";
import FullscreenExitIcon from "../icons/fullscreen-exit-icon.vue.mjs";
import CloseIcon from "../icons/close-icon.vue.mjs";
const _hoisted_1 = { class: "me-popup-box-inner" };
const _hoisted_2 = { class: "me-popup-title-left" };
const _hoisted_3 = { class: "me-popup-title-left-text" };
const _hoisted_4 = { class: "me-popup-title-right" };
const _sfc_main = /* @__PURE__ */ defineComponent({
  ...{
    name: "me-popup"
  },
  __name: "popup",
  props: {
    title: { default: "" },
    closable: { type: [Boolean, String], default: true },
    value: { type: Boolean, default: false },
    transitionName: { default: "scale" },
    width: { default: "600px" },
    height: { default: "auto" },
    draggable: { type: [Boolean, String], default: true },
    fullscreen: { type: [Boolean, String], default: false },
    borderd: { type: [Boolean, String], default: false },
    resize: { type: [Boolean, String], default: false },
    mask: { type: [Boolean, String], default: false },
    radius: { default: 4 },
    popupClass: {}
  },
  emits: ["update:value", "resize", "close"],
  setup(__props, { expose: __expose, emit: __emit }) {
    let timerId;
    const props = __props;
    const titleRef = ref();
    const popupRef = ref();
    let observer;
    const dragData = {
      startX: 0,
      startY: 0,
      top: 0,
      left: 0,
      popupWidth: 0,
      popupHeight: 0,
      isDrag: false
    };
    const showMask = computed(() => {
      const { value, mask } = props;
      return value && (mask || mask === "");
    });
    const slots = useSlots();
    const emits = __emit;
    const showTitle = computed(() => {
      return !!slots.title || (!!props.title || props.closable);
    });
    const isFullscreen = ref(false);
    const popupStyle = ref({
      width: props.width,
      height: props.height
    });
    let initialPopupStyle = JSON.parse(JSON.stringify(popupStyle.value));
    onMounted(() => {
      calcStyle();
    });
    const calcStyle = () => {
      const style = {};
      const { width, height } = props;
      if (width && height) {
        style.width = typeof width === "number" ? width + "px" : width;
        style.height = typeof height === "number" ? height + "px" : height;
      } else if (width) {
        style.width = typeof width === "number" ? width + "px" : width;
      } else if (height) {
        style.height = typeof height === "number" ? height + "px" : height;
      }
      if (!height) {
        style.height = "auto";
      }
      ;
      if (!width) {
        style.width = "auto";
      }
      ;
      timerId && clearTimeout(timerId);
      timerId = setTimeout(() => {
        if (popupRef.value && style.height === "auto") {
          const rect = popupRef.value.getBoundingClientRect();
          const height2 = rect.height + "px";
          const width2 = rect.width + "px";
          popupStyle.value = {
            width: width2,
            height: height2
          };
        }
      }, 350);
      popupStyle.value = style;
      initialPopupStyle = JSON.parse(JSON.stringify(style));
      if (popupRef.value) {
        const fontSize = parseFloat(document.documentElement.style.fontSize);
        if (style.width.indexOf("vw") > -1 || style.width.indexOf("%") > -1) {
          style.width = parseFloat(style.width) / 100 * window.innerWidth + "px";
        }
        if (style.height.indexOf("vh") > -1 || style.height.indexOf("%") > -1) {
          style.height = parseFloat(style.height) / 100 * window.innerHeight + "px";
        }
        if (style.width.indexOf("rem") > -1) {
          style.width = fontSize * parseFloat(style.width) + "px";
        }
        if (style.height.indexOf("rem") > -1) {
          style.height = fontSize * parseFloat(style.height) + "px";
        }
        const width2 = parseFloat(style.width);
        const height2 = parseFloat(style.height);
        dragData.top = (window.innerHeight - height2) / 2;
        dragData.left = (window.innerWidth - width2) / 2;
        dragData.popupWidth = width2;
        dragData.popupHeight = height2;
      }
    };
    const getTransitionname = computed(() => {
      const nameMap = {
        fade: "me-popup-fade",
        zoom: "me-popup-zoom",
        "slide-up": "me-popup-slide-up",
        "slide-down": "me-popup-slide-down",
        scale: "me-popup-scale",
        "scale-width": "me-popup-scale-width"
      };
      return nameMap[props.transitionName] ? nameMap[props.transitionName] : props.transitionName;
    });
    const isDraggable = computed(() => {
      return props.draggable || props.draggable === "";
    });
    const isResize = computed(() => {
      return props.resize || props.resize === "";
    });
    const borderStyle = computed(() => {
      const { borderd, radius } = props;
      const borderStyle2 = {
        header: {
          borderTopLeftRadius: `${radius}px`,
          borderTopRightRadius: `${radius}px`,
          border: ""
        },
        content: {
          borderBottomLeftRadius: `${radius}px`,
          borderBottomRightRadius: `${radius}px`,
          border: "",
          borderTop: "none"
        }
      };
      if (typeof borderd === "boolean" && borderd === true || typeof borderd === "string" && borderd === "") {
        borderStyle2.header.border = "1px solid #ccc";
        borderStyle2.content.border = "1px solid #ccc";
      } else if (typeof borderd === "string") {
        borderStyle2.header.border = borderd;
        borderStyle2.content.border = borderd;
      } else {
        borderStyle2.content.border = "none";
      }
      return borderStyle2;
    });
    watch(() => props.value, (newVal) => {
      if (newVal) {
        nextTick(() => {
          isDraggable.value && bindDrag();
          isResize.value && bindResize();
          calcStyle();
        });
      } else {
        isFullscreen.value = false;
        removeEventListener();
      }
    });
    const bindDrag = () => {
      titleRef.value.addEventListener("mousedown", onMousedown);
      window.addEventListener("mouseup", onMouseup);
      window.addEventListener("mousemove", onMousemove);
    };
    const onMousedown = (evt) => {
      if (isFullscreen.value) {
        dragData.isDrag = false;
        return;
      }
      evt.stopPropagation();
      dragData.startX = evt.clientX;
      dragData.startY = evt.clientY;
      const { top, left, width, height } = popupRef.value.getBoundingClientRect();
      dragData.top = top;
      dragData.left = left;
      dragData.popupWidth = width;
      dragData.popupHeight = height;
      dragData.isDrag = true;
    };
    const onMouseup = (evt) => {
      evt.stopPropagation();
      dragData.isDrag = false;
    };
    const onMousemove = (evt) => {
      if (dragData.isDrag) {
        let x, y;
        let transform = window.getComputedStyle(popupRef.value, null).transform;
        if (transform !== "none") {
          let { translateX, translateY } = getTranslate(transform);
          x = evt.clientX - dragData.startX + dragData.left + translateX;
          y = evt.clientY - dragData.startY + dragData.top + translateY;
        } else {
          x = evt.clientX - dragData.startX + dragData.left;
          y = evt.clientY - dragData.startY + dragData.top;
        }
        ;
        if (x < dragData.popupWidth / 2) {
          x = dragData.popupWidth / 2;
        } else if (x >= window.innerWidth - dragData.popupWidth + dragData.popupWidth / 2) {
          x = window.innerWidth - dragData.popupWidth + dragData.popupWidth / 2;
        }
        ;
        y = y >= dragData.popupHeight / 2 ? y : dragData.popupHeight / 2;
        popupRef.value.style.left = x + "px";
        popupRef.value.style.top = y + "px";
      }
    };
    const getTranslate = (transform) => {
      let matrix = transform.substring(7, transform.length - 1).split(",");
      let translateX = Math.abs(Number(matrix[4]));
      let translateY = Math.abs(Number(matrix[5]));
      return { translateX, translateY };
    };
    const onClose = () => {
      popupStyle.value = JSON.parse(JSON.stringify(initialPopupStyle));
      emits("update:value", false);
      emits("close");
    };
    const clickFullscreen = () => {
      if (!isFullscreen.value) {
        isFullscreen.value = true;
        const left = (popupRef.value.style.left ? parseFloat(popupRef.value.style.left) : null) || dragData.popupWidth / 2 + dragData.left;
        const top = (popupRef.value.style.top ? parseFloat(popupRef.value.style.top) : null) || dragData.popupHeight / 2 + dragData.top;
        popupRef.value.style.left = left + "px";
        popupRef.value.style.top = top + "px";
        popupRef.value.style.height = dragData.popupHeight + "px";
        nextTick(() => {
          popupRef.value.style.left = "50%";
          popupRef.value.style.top = "50%";
          popupRef.value.style.height = window.innerHeight + "px";
          popupRef.value.style.width = window.innerWidth + "px";
          popupStyle.value.width = window.innerWidth + "px";
          popupStyle.value.height = window.innerHeight + "px";
        });
      } else {
        popupRef.value.style.left = "50%";
        popupRef.value.style.top = "50%";
        nextTick(() => {
          popupRef.value.style.left = dragData.popupWidth / 2 + dragData.left + "px";
          popupRef.value.style.top = dragData.popupHeight / 2 + dragData.top + "px";
          popupRef.value.style.width = dragData.popupWidth + "px";
          popupRef.value.style.height = dragData.popupHeight + "px";
          setTimeout(() => {
            isFullscreen.value = false;
            nextTick(() => {
              popupRef.value.style.width = dragData.popupWidth + "px";
              popupRef.value.style.height = dragData.popupHeight + "px";
              popupStyle.value.width = dragData.popupWidth + "px";
              popupStyle.value.height = dragData.popupHeight + "px";
            });
          }, 300);
        });
      }
    };
    const bindResize = () => {
      observer = new ResizeObserver((entries) => {
        if (!isFullscreen.value) {
          if (entries[0].contentRect.width > 0 && entries[0].contentRect.height > 0) {
            popupStyle.value.width = entries[0].contentRect.width + "px";
            popupStyle.value.height = entries[0].contentRect.height + "px";
          }
        }
        emits("resize");
      });
      observer.observe(popupRef.value);
    };
    const removeEventListener = () => {
      if (titleRef.value) {
        titleRef.value.removeEventListener("mousedown", onMousedown);
      }
      window.removeEventListener("mouseup", onMouseup);
      window.removeEventListener("mousemove", onMousemove);
    };
    const clickMask = () => {
      if (!props.closable) {
        onClose();
      }
    };
    __expose({
      close() {
        onClose();
      },
      toggleFullscreen() {
        clickFullscreen();
      }
    });
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock(Fragment, null, [
        (openBlock(), createBlock(Teleport, { to: "body" }, [
          createVNode(Transition, { name: "me-popup-fade" }, {
            default: withCtx(() => [
              showMask.value ? (openBlock(), createElementBlock("div", {
                key: 0,
                onClick: clickMask,
                class: "me-popup-mask"
              })) : createCommentVNode("", true)
            ]),
            _: 1
          })
        ])),
        (openBlock(), createBlock(Teleport, { to: "body" }, [
          createVNode(Transition, { name: getTransitionname.value }, {
            default: withCtx(() => [
              _ctx.value ? (openBlock(), createElementBlock("div", {
                key: 0,
                class: normalizeClass(["me-popup-box", [isFullscreen.value ? "fullscreen" : "", isResize.value && !isFullscreen.value ? "resize" : "", _ctx.popupClass]]),
                style: normalizeStyle({ ...popupStyle.value }),
                ref_key: "popupRef",
                ref: popupRef
              }, [
                createElementVNode("div", _hoisted_1, [
                  showTitle.value ? (openBlock(), createElementBlock("div", {
                    key: 0,
                    ref_key: "titleRef",
                    ref: titleRef,
                    class: normalizeClass(["me-popup-title-wrap", { draggable: isDraggable.value }])
                  }, [
                    renderSlot(_ctx.$slots, "title", {}, () => [
                      createElementVNode("div", {
                        class: "me-popup-title",
                        style: normalizeStyle({ ...borderStyle.value.header })
                      }, [
                        createElementVNode("div", _hoisted_2, [
                          createElementVNode("div", _hoisted_3, toDisplayString(_ctx.title), 1),
                          _cache[0] || (_cache[0] = createElementVNode("div", { class: "me-popup-title-left-line" }, [
                            createElementVNode("span", { class: "me-popup-title-left-line-1" }),
                            createElementVNode("span", { class: "me-popup-title-left-line-2" }),
                            createElementVNode("span", { class: "me-popup-title-left-line-3" })
                          ], -1))
                        ]),
                        createElementVNode("div", _hoisted_4, [
                          renderSlot(_ctx.$slots, "title-right"),
                          _ctx.fullscreen ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
                            !isFullscreen.value ? (openBlock(), createBlock(unref(FullscreenIcon), {
                              key: 0,
                              onClick: clickFullscreen,
                              class: "me-popup-title-right-icon"
                            })) : (openBlock(), createBlock(unref(FullscreenExitIcon), {
                              key: 1,
                              onClick: clickFullscreen,
                              class: "me-popup-title-right-icon"
                            }))
                          ], 64)) : createCommentVNode("", true),
                          _ctx.closable ? (openBlock(), createBlock(unref(CloseIcon), {
                            key: 1,
                            onClick: onClose,
                            class: "me-popup-title-right-icon"
                          })) : createCommentVNode("", true)
                        ])
                      ], 4)
                    ])
                  ], 2)) : createCommentVNode("", true),
                  createElementVNode("div", {
                    class: "me-popup-box-content",
                    style: normalizeStyle({ ...borderStyle.value.content })
                  }, [
                    renderSlot(_ctx.$slots, "default")
                  ], 4)
                ])
              ], 6)) : createCommentVNode("", true)
            ]),
            _: 3
          }, 8, ["name"])
        ]))
      ], 64);
    };
  }
});
export {
  _sfc_main as default
};
//# sourceMappingURL=popup.vue2.mjs.map
